<template>
  <div class="wrapper">
    <!-- 搜索栏 -->
    <div class="search-bar">
      <div class="search-input">
        <i class="material-icons">search</i>
        <input type="text" placeholder="搜索商家、商品名称">
      </div>
    </div>

    <!-- 活动轮播 -->
    <div class="banner">
      <img src="@/assets/index_banner.png" alt="活动banner">
    </div>

    <!-- 功能导航 -->
    <div class="nav-grid">
      <div class="nav-item" v-for="(item, index) in navItems" :key="index" @click="handleNavClick(item)">
        <i class="material-icons">{{ item.icon }}</i>
        <span>{{ item.name }}</span>
      </div>
    </div>

    <!-- 推荐商家 -->
    <div class="section">
      <div class="section-header">
        <h3>推荐商家</h3>
        <span class="more">查看更多 <i class="material-icons">chevron_right</i></span>
      </div>
      <div class="business-list">
        <div class="business-card" v-for="(business, index) in businesses" :key="index">
          <img :src="business.image" :alt="business.name">
          <div class="business-info">
            <h4>{{ business.name }}</h4>
            <div class="rating">
              <i class="material-icons">star</i>
              <span>{{ business.rating }}</span>
              <span class="sales">月售{{ business.monthlySales }}单</span>
            </div>
            <div class="delivery-info">
              <span>¥{{ business.minPrice }}起送</span>
              <span>配送费¥{{ business.deliveryFee }}</span>
              <span>{{ business.distance }}km</span>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 底部导航 -->
    <Footer />
  </div>
</template>

<script>
import Footer from '../components/Footer.vue';

export default {
  name: 'Discover',
  data() {
    return {
      navItems: [
        { icon: 'local_offer', name: '优惠专区' },
        { icon: 'restaurant', name: '美食外卖' },
        { icon: 'shopping_basket', name: '超市便利' },
        { icon: 'local_cafe', name: '下午茶' },
        { icon: 'local_pizza', name: '快餐便当' },
        { icon: 'cake', name: '甜点饮品' },
        { icon: 'local_dining', name: '特色菜系' },
        { icon: 'more_horiz', name: '更多分类' }
      ],
      businesses: [
        {
          name: '万家饺子（软件园E18店）',
          image: require('@/assets/sj01.png'),
          rating: 4.9,
          monthlySales: 345,
          minPrice: 15,
          deliveryFee: 3,
          distance: 3.22
        },
        {
          name: '川湘居（软件园店）',
          image: require('@/assets/sj02.png'),
          rating: 4.8,
          monthlySales: 289,
          minPrice: 20,
          deliveryFee: 4,
          distance: 2.5
        },
        {
          name: '粤式茶餐厅',
          image: require('@/assets/sj03.png'),
          rating: 4.7,
          monthlySales: 256,
          minPrice: 25,
          deliveryFee: 5,
          distance: 3.8
        },
        {
          name: '韩式烤肉（软件园店）',
          image: require('@/assets/sj04.png'),
          rating: 4.6,
          monthlySales: 198,
          minPrice: 30,
          deliveryFee: 6,
          distance: 4.2
        },
        {
          name: '日式料理',
          image: require('@/assets/sj05.png'),
          rating: 4.9,
          monthlySales: 312,
          minPrice: 35,
          deliveryFee: 8,
          distance: 3.5
        }
      ]
    }
  },
  components: {
    Footer
  },
  methods: {
    handleNavClick(item) {
      // 处理导航点击事件
      console.log('点击了:', item.name);
    }
  }
}
</script>

<style scoped>
.wrapper {
  min-height: 100vh;
  background-color: #f5f5f5;
  padding-bottom: 14vw;
}

.search-bar {
  background-color: var(--md-sys-color-primary);
  padding: 12px 16px;
}

.search-input {
  background-color: white;
  border-radius: 20px;
  display: flex;
  align-items: center;
  padding: 8px 16px;
}

.search-input i {
  color: #999;
  margin-right: 8px;
}

.search-input input {
  border: none;
  outline: none;
  flex: 1;
  font-size: 14px;
}

.banner {
  padding: 12px 16px;
}

.banner img {
  width: 100%;
  border-radius: 8px;
}

.nav-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  padding: 16px;
  background-color: white;
  margin-bottom: 12px;
}

.nav-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  cursor: pointer;
}

.nav-item i {
  color: var(--md-sys-color-primary);
  font-size: 24px;
}

.nav-item span {
  font-size: 12px;
  color: #333;
}

.section {
  background-color: white;
  margin-bottom: 12px;
}

.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px;
  border-bottom: 1px solid #f5f5f5;
}

.section-header h3 {
  font-size: 16px;
  color: #333;
}

.more {
  font-size: 14px;
  color: #999;
  display: flex;
  align-items: center;
}

.business-list {
  padding: 16px;
}

.business-card {
  display: flex;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid #f5f5f5;
}

.business-card:last-child {
  border-bottom: none;
}

.business-card img {
  width: 80px;
  height: 80px;
  border-radius: 4px;
  object-fit: cover;
}

.business-info {
  flex: 1;
}

.business-info h4 {
  font-size: 16px;
  color: #333;
  margin-bottom: 8px;
}

.rating {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-bottom: 8px;
}

.rating i {
  color: #ffb800;
  font-size: 16px;
}

.rating span {
  font-size: 14px;
  color: #666;
}

.sales {
  margin-left: 8px;
  color: #999;
}

.delivery-info {
  display: flex;
  gap: 12px;
  font-size: 12px;
  color: #999;
}
</style> 